<template>
  <div id="single-blog">
    <h1>{{blog.title}}</h1>
    <p class="author" v-if="blog.author">作者：{{blog.author}}</p>
    <p class="author" v-else>作者：匿名</p>
    <hr><br>
    <!-- <article>{{blog.content}}</article> -->
    <div v-text="blog.content" style="white-space: pre-wrap;word-wrap:break-word;"></div>
    <hr><br>
    <p>分类：</p>
    <ul>
      <li v-for="category in blog.categories" :key="category">{{category}}</li>
    </ul>

    <el-button slot="reference" @click="deleteSingleBlog()">删除</el-button>

    <!-- <button @click="deleteSingleBlog()">删除</button> -->
    <router-link :to="'/edit/'+id">编辑博客</router-link>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'singleblog',
    data() {
      return {
        id: this.$route.params.id,
        blog: {}
      }
    },
    created() {
      const baseUrl = 'https://m7mqr0oh.lc-cn-n1-shared.com/1.1/'
      const header = {
        'x-avoscloud-application-id': 'm7MqR0ohghp4q78bJ5L2EstT-gzGzoHsz',
        'x-avoscloud-session-token': 'm7MqR0ohghp4q78bJ5L2EstT-gzGzoHsz',
        'x-avoscloud-application-key': 'ETEgD3OphCkHtbozcXn8IPBt'
      }

      axios.get(baseUrl + "classes/blog/" + this.id, {
          headers: header
        })
        .then((data) => {
          this.blog = data.data;
        })
    },
    methods: {
      async deleteSingleBlog() {
        const baseUrl = 'https://m7mqr0oh.lc-cn-n1-shared.com/1.1/'
        const header = {
          'x-avoscloud-application-id': 'm7MqR0ohghp4q78bJ5L2EstT-gzGzoHsz',
          'x-avoscloud-session-token': 'm7MqR0ohghp4q78bJ5L2EstT-gzGzoHsz',
          'x-avoscloud-application-key': 'ETEgD3OphCkHtbozcXn8IPBt'
        }
        const confirmResult = await this.$confirm('确定要删除该博客吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {});

        if (confirmResult !== 'confirm') {
          return this.$message.info('已经取消删除！')
        }

        axios.delete(baseUrl + "classes/blog/" + this.id, {
          headers: header
        }).then(response => {
          this.$message.success('博客删除成功！');
          this.$router.push('/')
        })
      }
    }
  }

</script>

<style scoped>
  #single-blog {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 80px;
    background: #eee;
    border: 1px dotted #aaa;
  }


  button {
    display: inline-block;
    width: 80px;
    height: 36.8px;
    background: green;
    color: #fff;
    border: 0;
    padding: 8px;
    border-radius: 5px;
    margin: 10px 10px;
    font-size: 16px;
    cursor: pointer;
  }

  a {
    background-color: rgb(251, 114, 153);
    color: #fff;
    text-decoration: none;
    padding: 8px;
    border-radius: 5px;
  }

  .author {
    color: rgb(251, 114, 153);
    font-weight: 600;
  }

</style>
